<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>正则表达式总结</title>
</head>
<body>
<textarea name="" id="t1" cols="30" rows="10"></textarea>
<button id="btn">按钮</button>

<div id="div1">
  <p>姓名：李征</p>
  <h3>ID：12312421236</h3>
  <p>技能：游戏</p>
</div>

<div>
  <a href="https://baijiahao.baidu.com/s?id=1707305887806908453&wfr=spider&for=pc">/s</a> 指空白，包括空格、换行、Tab 缩进等所有的空白，而 \S 刚好相反
  <br>
</div>

<script>
  /*
  * ?的作用：
  * 1.匹配表达式0次或1次，等价于{0,1}
  * 2.如果紧跟在任何量词“*，+，？”或者{}后面，将会使量词变为非贪婪模式，默认是贪婪的
  * */
  console.log('----------1---------')
  let str = 'aAbdfl abc Ada aaa';
  console.log('贪婪模式');
  console.log(str.match(/a+/ig));
  console.log('非贪婪模式')
  console.log(str.match(/a+?/ig));


  /*
  * \b匹配单词边界  当是\B时表示非单词边界
  * */
  console.log('----------2---------')
  let str2 = 'hello world helloworld worldhello';
  console.log(str2.match(/hello/g));
  console.log(str2.match(/\bhello\b/g));
  console.log(str2.match(/hello\b/g));

  //拓展：数字\d和\D表示非数字
  console.log('--------3-------');
  let str3 = 'hello wo12rld hell232oworl23d wor434ldhello';
  console.log(str3.match(/\d+/g));
  console.log(str3.match(/\D+/g));
  let reg22 = /^[0-9]+$/;
  console.log(reg22.test('22323d34'))


  /*
  * 多行模式
  * */
  window.onload = () => {
    let ot = document.querySelector('#t1');
    let obtn = document.querySelector('#btn');

    obtn.onclick = () => {
      let str = ot.value;
      //console.log(str.match(/hello/g));
      console.log(str.match(/^hello/gm));
    }

  }


  /*
  * .表示除了换行以外所有字符
  * */
  console.log('--------4-------');
  let str4 = 'abc abbc adcf';
  console.log(str4.match(/a.c/g));
  console.log(str4.match(/a.+c/g));
  console.log(str4.match(/a.+?c/g));

  /*
  * 分组():匹配x并记住，()称为捕获括号
  * */
  let str5 = 'fredfred'
  console.log('--------5-------');
  console.log(str5.match(/fred/));
  console.log(str5.match(/fred+/));
  console.log(str5.match(/(fred)+/));


  console.log('--------6-------');
  let str6 = 'foo bar foo bar';
  // console.log(str6.match(/(foo) (bar) (foo) (bar)/))
  console.log(str6.match(/(foo) (bar) \1 \2/))
  console.log(str6.match(/(foo) (bar) (\1) (\2)/));

  console.log('--------7-------');
  console.log(str6.match(/(.)o.*\1oo/));

  console.log('--------8-------')
  console.log('abcabc'.match(/(.)b(.)/));
  console.log('abcabc'.match(/(.)b(.)\1b\2/));


  /*
  * replace替换时使用分组信息不再是\n而是$n
  * */
  console.log('--------9--------')
  console.log('hello world'.replace(/(\w+)(\w+)/, '$2$1'));

  let str7 = 'hello world'; //目标 world hello
  console.log(str7.replace(/(\w+) (\w+)/, '$2 $1'));

  let str8 = 'li zheng'; //zheng li
  console.log(str8.replace(/(\w+) (\w+)/, '$2 $1'));

  // 使用match时，如果加\g捕获不到分组里的内容，必须使用reg.exec(str)
  let str9 = 'hello world';
  console.log('-----------10-------')
  console.log(str9.match(/(e+)/g));

  let reg = new RegExp('(e)', 'g');
  console.log(reg.exec(str9));
  console.log(reg.exec(str9));


  /*
  * exec()方法 如果表达式中有g选项，则可以多次使用exec，下次匹配从上次的结果后开始
  * */
  console.log('--------11-------')
  let str10 = 'abc abbc acbb abcd abbbc';
  let reg10 = new RegExp('ab*c','g'); // 可以对比加上g和不加g的区别
  console.log(reg10.exec(str10));
  console.log(reg10.exec(str10));
  console.log(reg10.exec(str10));
  console.log(reg10.exec(str10));
  console.log(reg10.exec(str10));
  console.log(reg10.exec(str10)); // 指导匹配为null


  /*
  * (?:x) 表示：匹配x但不记住，称为非捕获括号，因为分组最多有9个
  * x(?=y) 表示：匹配x并且后面必须是y
  * x(?!y) 表示：匹配x并且后面不是y
  * x|y 表示：匹配x或者y
  * */
  console.log('--------------12-----------')
  let str11 = 'foo1 fox foo';
  console.log(str11.match(/fo(?=o)/));

  let strTest = '10000000';
  console.log(strTest.match(/\B/g));
  console.log(strTest.match(/\B(?=(\d{3})+(?!\d))/g));


  /*
  * 案例
  *
  * */
  console.log('--------------13-----------')
  //手机号
  let reg_anli1 = /1[34578]\d{9}/
  let str_anli1 = '张三，男，手机号：13512341234';
  console.log(str_anli1.replace(reg_anli1, '***'));
  let s = str_anli1.replace(reg_anli1, o=> {
    let t = '';
    for(let i = 0;i<o.length;i++){
      t += '*'
    }
    return t;
  });
  console.log(s);

  // 网页标签
  let str_anli2 = 'abjl <span>binjing@qq.com</span> jfdljgld';
  let reg_anli2 = /<(.+)>(.*)<\/\1>/;
  console.log(str_anli2.match(reg_anli2));

  // 获取页面中id为div1中的ID号
  let html = document.getElementById('div1');
  let str_anli3 = html.innerHTML;

  let reg_anli3 = /.*<(.+)>ID[:：](\d{11})<\/\1>/;
  console.log(str_anli3.match(reg_anli3))

  //数字添加千分位
  let num = '63748378263927382';
  console.log(num.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))

  // 金额
  console.log('-------金额-------');
  let test = '2121';
  console.log(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(test))

  // 字符串去空格
  console.log('----- 字符串去空格 ------');
  var trimStr = 'test';
  // 去除所有空格
  trimStr = trimStr.replace(/\s+/g,'');
  // 去除两头空格
  trimStr = trimStr.replace(/^\s+|\s+$/g,'');
  // 去除左空格
  trimStr = trimStr.replace(/^\s*/,'');
  // 去除有空格
  trimStr = trimStr.replace(/(\s*$)/,'');
</script>
<script>
  (function () {
    const str = '(10)一般秘密'
    str.replace(/\((.+)\)(.+)/, function () {
      console.log(arguments)
    })

    console.log(str.split(')'))
  })()
</script>
</body>
</html>
